<script setup lang="ts" name="layout">
import { ref } from 'vue'
import { UserFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, type DropdownInstance } from 'element-plus'
import menuTree from '@/components/menuTree.vue'
import breadcrumbList from '@/components/breadcrumbList.vue';
import { useRouter } from 'vue-router'
const router = useRouter();

const dropdown = ref<DropdownInstance>()

const avaClick = () => {
    ElMessageBox.confirm(
        '否退出当前登录?',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '关闭',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '退出成功',
            })
            setTimeout(() => {
                router.push('/login')
            }, 2000)
        })
}

</script>

<template>
    <el-container>
        <el-header>
            <div class="h-left">CMS后台管理</div>
            <div class="h-right">
                <breadcrumbList />
                <div>
                    <el-dropdown ref="dropdown" @command="avaClick">
                        <el-avatar :icon="UserFilled" :size="30" />
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <menuTree />
            </el-aside>
            <el-container>
                <el-main>
                    <routerView />
                </el-main>
                <el-footer>CMS后台管理</el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>

<style scoped lang="scss">
.el-container {
    height: 100%;
    width: 100%;
    overflow: hidden;

    .el-header {
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 0;
        position: relative;

        .h-left {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            font-size: 20px;
            position: relative;

            &::after {
                content: '';
                width: 1px;
                height: 100%;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                box-shadow: 1px 1px 2px #ddd;
                z-index: 9999;
            }
        }

        &::after {
            content: '';
            width: 100%;
            height: 1px;
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            box-shadow: 0 1px 2px #ddd;
            z-index: 9999;
        }

        .h-right {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .el-aside {
        background-color: #ffffff;
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ccc;
    }
}
</style>